<template>
    <i :style="getIconStyle" class="icon-wrapper">
        <svg v-if="isLocal" aria-hidden="true" :style="{ width: '100%', height: '100%' }">
            <use :xlink:href="symbolId" />
        </svg>
        <template v-else>
            <IconifyIcon v-if="isUseOnline" :icon="getIconName" :style="getIconStyle"></IconifyIcon>
            <div v-else :class="`${icon} iconify`" :style="getIconStyle"></div>
        </template>
    </i>
</template>
<script lang="ts" setup>
import _ from 'lodash'
import { Icon as IconifyIcon } from '@iconify/vue'
import type { CSSProperties } from 'vue'
const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'inherit'
  },
  size: Number,
  hoverColor: String
})

const { icon } = props

// 是否使用本地Svg图标
const svgPrefix = 'svg-icon:'

const isLocal = computed(() => icon.startsWith(svgPrefix))

// 是否使用在线图标

const isUseOnline = computed(() => import.meta.env.VITE_USE_ONLINE_ICON === 'true')

const symbolId = computed(() => unref(isLocal) ? `#icon-${icon.split(svgPrefix)[1]}` : icon)

const getIconStyle = computed<CSSProperties>(() => {
  const { size, color } = props
  if (!size && !color) return {}

  return {
    fontSize: _.isUndefined(size) ? 'inherit' : `${size}px`,
    'color': color
  }
})

const getIconName = computed(() => {
    return icon.startsWith('vi-') ? icon.replace('vi-', '') : icon
})
</script>
<style scoped lang="less">
.icon-wrapper {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;

  svg {
    height: 1em;
    width: 1em;
  }
}
</style>

